<template>
    <div class="fengjing">
        <div class="main">
            <ul>
                <li>
                    <img src="../pages/img/x6.webp" alt="">
                    <h2>天气很哇塞</h2>
                    <p>阅读<span>3.2万</span></p>
                </li>
                <li>
                    <img src="../pages/img/x1.webp" alt="">
                    <h2>风是自由的</h2>
                    <p>阅读<span>2.6万</span></p>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../pages/img/x2.webp" alt="">
                    <h2>绝美玻璃海</h2>
                    <p>阅读<span>2.2万</span></p>
                </li>
                <li>
                    <img src="../pages/img/x3.webp" alt="">
                    <h2>聆海时光</h2>
                    <p>阅读<span>2万</span></p>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../pages/img/x4.webp" alt="">
                    <h2>田园风光</h2>
                    <p>阅读<span>2.8万</span></p>
                </li>
                <li>
                    <img src="../pages/img/x5.webp" alt="">
                    <h2>日落和晚风</h2>
                    <p>阅读<span>3.6万</span></p>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../../common/less/varible.less';

.fengjing {
    font-family: @fontfamily;
    overflow: hidden;


    .main {
        width: calc(100% - 20px);
        margin: 0 auto;

        ul {
            margin-top: 10px;
            height: 145px;
            width: 100%;
            display: flex;
            flex-grow: 1;
            justify-content: space-around;
            li {
                width: 48%;

                img {
                    width: 100%;
                }
                h2{
                    color: #787878;
                    margin-top: 5px;
                }
                p{
                    margin-top: 2px;
                    color: #787878;
                    span{
                        margin-left: 5px;
                    }
                }
            }
        }
    }
}
</style>